<template>
  <div class="tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>时间选择 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <span>停站原因 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          
          <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type='delet' @click="closeStation"><i class="iconfont icon-daochu"></i>停站</el-button>
          <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
     </div>
     <div class="currency-mode-wrap">
          <yf-tabs type="border-card">
            <yf-tab-pane label="当前断面">
                    <div class="tablebox">
                        <el-table
                          :data="tableData"
                          border
                          style="width: 100%">
                          <el-table-column
                            type="index"
                            :index="indexMethod"
                            width="50">
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="开始时间">
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="结束时间">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="停站原因">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="是否生效">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="操作人">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            width='380'
                            label="备注">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="操作">
                          </el-table-column>
                        </el-table>
                    </div>
            </yf-tab-pane>
            <yf-tab-pane label="所有断面">
                      <el-table
                          :data="tableData"
                          border
                          style="width: 100%">
                          <el-table-column
                            type="index"
                            :index="indexMethod"
                            width="50">
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="断面名称">
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="开始时间">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="结束时间">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="停站原因">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="是否生效">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                           
                            label="操作人">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                             width='380'
                            label="备注">
                          </el-table-column>
                      </el-table>

            </yf-tab-pane>
          </yf-tabs>
     </div>
     <el-dialog :visible.sync="visiDialog"  width="600px" title="停站" :before-close="closess" >
       <div class="dialogcontent">
             <div class="dialog-layout">
              <el-form ref="form" :model="formData"  size="mini" :rules="rules">
                    <ul  class="formul">
                      <li>
                          <div>
                                <span>MN号 : </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="formData.mnCode" disabled></el-input>
                                </div>
                          </div>
                          <div>
                                <span>断面名称 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="formData.name" disabled></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span>开始时间 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                   <el-form-item prop="dateRange">
                                  <el-date-picker v-model="formData.dateRange" type="datetime" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                  </el-form-item>
                                </div>
                          </div>
                          <div>
                                <span>停站原因 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-form-item prop="reason">
                                  <el-select v-model="formData.reason" placeholder="请选择" @change="selectChange">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                   </el-form-item>
                                </div>
                          </div>
                      </li>
                      <li>
                            <div class="uploaddiv" style="width:100%">
                                <span>停站附件 : </span>
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <el-button slot="trigger"><i class="icon-shangchuan1 iconfont"></i> 选择文件</el-button>
                                </el-upload>
                            </div>
                      </li>
                      <li style="height:90px">
                           <div class="uploaddiv" style="width:100%">
                                <span>描述 : </span>
                                <div class="layoutBox" style="width:100%">
                                  <el-form-item prop="des">
                                  <el-input v-model="formData.des" type="textarea" :rows="4" placeholder="请输入内容" resize='none'></el-input>
                                  </el-form-item>
                                </div>
                          </div>
                      </li>
                    </ul>
              </el-form>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="submitForm('form')">确 定</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">取 消</el-button>
       </div>
     </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      value: "",
      visiDialog: false,
      input: "1111111",
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      selectCheck: [], //选中的监测项目
      tableData: [],
      fileList: [],
      formData:{
        mnCode:'',
        name:'',
        dateRange:'',
        reason:'',
        des:'',
      },
      rules:{
        reason: [
            { required: true, message: '请选择原因', trigger: 'change' }
        ],
        dateRange: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        des: [
            { required: true, message: '请输入描述', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ],
      }
    };
  },
  created() {
    this.$store.commit("setShowlefttree", true);
  },
  methods: {
    selectChange(val) {
      this.selectCheck = val;
    },
    indexMethod(index) {
      return index + 1;
    },
    closess(done) {
      done();
    },
    closeStation() {
      this.visiDialog = true;
    },
    search() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  }
};
</script>

<style scoped lang="less">
</style>
